<template>
    <div class="max-width">
        <h1>
            Jd类别
        </h1>
        <div class="main">
        </div>
        <div class="main">
            <button @click="ok_click()">转换</button>
        </div>
        <pre v-html="result" class="res" ref="res"></pre>
    </div>

</template>

<script type="text/ecmascript-6">
    import json from "./jd"

    export default {
        data: function () {
            return {
                app_name: this.$route.params.name,
                list: [],
                result: ""
            }
        },
        mounted() {
            this.list = json.data;
        },
        methods: {
            ok_click() {
                if (this.chk() == false) return;

                //模板：
                //一类名称，一类URL，二类名称，二类Url，三类名称，三类Url，四类名称，四类Url

                var list2 = [];

                var gen = (paths) => {

                    var item = {};

                    Object.keys(paths).sort().map(it => {
                        var obj = paths[it];

                        item["url" + it] = obj.url
                        item["name" + it] = obj.name
                    });

                    list2.push(item)
                };

                var paths = {};


                jv.recursionJson(this.list, (k, v, obj, d) => {
                    if(obj && obj.ObjectType) {
                        delete obj.b;
                        delete obj.p;
                        delete obj.style;
                        delete obj.id;
                        delete obj.c;
                    }

                    if (k == "n") {
                        var its = v.split("|");
                        obj.url = its[0];
                        obj.name = its[1];

                        delete obj.n;
                        paths[d] = obj;

                        if (obj.s.length == 0) {
                            gen(paths);
                        }
                    }


                });


                this.result = list2.map(it => {
                    var keys = Object.keys(it).sort()
                    return keys.map(k => {
                        return it[k];
                    }).join("\t")
                }).join("\n");


                this.$nextTick(() => {
                    var range = document.createRange();
                    range.selectNodeContents(this.$refs.res);
                    var selection = window.getSelection();
                    selection.removeAllRanges();
                    selection.addRange(range)
                });
            }
        }
    }
</script>

<style scoped>
    >>> .kv {
        margin: 10px;
        display: flex;
    }

    >>> .kv .k {
        display: inline-block;
        text-align: right;
        min-width: 160px;
    }

    >>> .kv .v {
        display: flex;
        flex: 1;
    }

    >>> .kv input {
        padding: 3px 5px;
        flex: 1;
    }

</style>
